<script>
let vm;
import {mapActions, mapMutations, mapState } from 'vuex';

export default {
	onLaunch: function() {
		console.log('App Launch');
		vm = this
		
		uni.login({
			success(res) {
				if(res.code){
					uniCloud.callFunction({
					    name: 'gasloginCloud',
					    data: {
							  code:res.code
						  },
						  success(res) {
							  //console.log('gasloginCloud',res)
							  
							  uni.setStorage({
								key:'openid',
								data:res.result.res.data.openid
							  })
							  
						  },
						  complete(res) {
						  	console.log('gaslogincomplete',JSON.stringify(res.result.data))
						  }
					  })
				}
			},
		})
		
		vm.setMenuButtonInfo(uni.getMenuButtonBoundingClientRect())
		
	},
	methods:{
		...mapMutations('user', ['setMenuButtonInfo']),
		...mapActions('user', ['setUserInfo']),
	},
	onShow: function() {
		//console.log('App Show');
		
		// const updateManager = uni.getUpdateManager();
		
		// updateManager.onCheckForUpdate(function (res) {
		//   // 请求完新版本信息的回调
		//   console.log(res.hasUpdate);
		// });
		
		// updateManager.onUpdateReady(function (res) {
		//   uni.showModal({
		//     title: '更新提示',
		//     content: '新版本已经准备好，是否重启应用？',
		//     success(res) {
		//       if (res.confirm) {
		//         // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
		//         updateManager.applyUpdate();
		//       }
		//     }
		//   });
		
		// });
	},
	onHide: function() {
		// console.log('App Hide');
	}
};
</script>

<style>
/*每个页面公共css */ 
page{
	overflow-y: auto;
}
page,view,scroll-view,text,button,image{
	font-family: 微软雅黑;
	box-sizing: border-box !important;
	font-size: 28rpx;
	flex-shrink: 0;
	position: relative;
}
.container{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  font-family: 'Courier New', Courier, monospace;
  background: #f5f6f9;
}
	
.flex_center_row{
	display: flex;
	align-items: center;
	justify-content: center;
}		
.flex_between_row{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex_around_row{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.flex_column{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.flex_around_column{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
.flex_between_column{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.box_shadow{
	box-shadow: 0 0 10rpx 8rpx rgba(211, 211, 211, 0.2);
}
.fixed_box{
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	background: #fff;
}
.padding_right150{
	padding-right: 150rpx;
}
.openLocation_btn{
	position: absolute;
	z-index: 999;
	width: 100rpx;
	height: 100rpx;
	right: 40rpx;
	top: 60rpx;
}
page, view, scroll-view, text, button{
	font-size: 28rpx;
}
</style>
<style lang="scss">
	.item_box{
		position: relative;
		border-radius: 20rpx;
		box-shadow: $uni-boxshadow;
		padding:36rpx;
		margin-bottom: $uni-spacing-col-36;
		background: #FFFFFF;
		transition: all .3s linear;
		.tit{
			position: relative;
			display: flex;
			align-items: center;
			min-height: 82rpx;
			margin-bottom: 36rpx;
			&>view{
				width: calc(100% - 82rpx);
			}
			.alarm_level{
				position: relative;
				margin-right: 16rpx;
				width: 82rpx;
				height: 82rpx;
				flex-shrink: 0;
			}
			.alarm_type{
				color: $uni-text-color-black;
				// white-space: nowrap;
				// overflow: hidden;
				// text-overflow:ellipsis;
				font-weight: 600;
				font-size: 30rpx;
				width: 90%;
			}
	
			.alarm_level1{
				background: $uni-alarm-level-1;
				&.not_readed{
					&::before{
						background: $uni-alarm-level-1;
					}
				}
			}
			.alarm_level2{
				background: $uni-alarm-level-2;
				&.not_readed{
					&::before{
						background: $uni-alarm-level-2;
					}
				}
			}
			.alarm_level3{
				background: $uni-alarm-level-3;
				&.not_readed{
					&::before{
						background: $uni-alarm-level-3;
					}
				}
			}
			.tagBox{
				margin-top: 12rpx;
				// padding: 0 10rpx;
				width: fit-content;
				height: 38rpx;
				border-radius: 38rpx;
				display: flex;
				align-items: center;
				text{
					font-size: 24rpx;
					line-height: 38rpx;
					text-indent: 4rpx;
					&:first-child{
						display: block;
						width: 48rpx;
						height: 38rpx;
						text-align: center;
						border-top-left-radius: 38rpx;
						border-bottom-left-radius: 38rpx;
						position: relative;
						// left: -10rpx;
					}
				}
				image{
					height: 20rpx;
					width: 20rpx;
				}
			}
			.tagBox1{
				background-color: #FFEFEB;
				color: #F32B00;
				text{
					&:first-child{
						background-color: #FFE0D9;
					}
				}
			}
			.tagBox2{
				background-color: #FDF1E5;
				color: #EA7900;
				text{
					&:first-child{
						background-color: #FBE5CE;
					}
				}
			}
			.tagBox3{
				background-color: #FCF4E5;
				color: #D19400;
				text{
					&:first-child{
						background-color: #F9EACE;
					}
				}
			}
			
		}
		.info_box{
			display: flex;
			align-items: flex-start;
			height: 32rpx;
			line-height: 32rpx;
			margin-bottom: 20rpx;
			.label{
				image{
					height: 28rpx;
					width: 28rpx;
				}
			}
			.value{
				color: $uni-text-color;
				flex: 1;
				flex-shrink: 0;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				margin-left: 10rpx;
				display: block;
			}
			&:last-child{
				margin-bottom: 0;
			}
		}
		.btn_box{
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: $uni-color-primary;
			background: transparent;
			border: none;
			border-top: 2rpx solid #dde0e4;
			outline: none;
			border-radius: 0;
		}
		&.not_readed{
			&::before{
				content: '';
			position: absolute;
			width: 14rpx;
			height: 14rpx;
			border-radius: 50%;
			right: 14rpx;
			top: 14rpx;
			background: #FF5E3B;
			}
		}
	}
	
	.item_detail_box{
		position: absolute;
		width: 100%;	
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background: #FFFFFF;
		transition: all .5s;
		overflow: hidden;
		.detail_head{
			height: 450rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			color: $uni-text-color-grey;
			background: #fff;
			
			.alarmDesc{
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
			}
			.monitorValue{
				color: $uni-color-warning;
				font-size: 28rpx;
				text{
					font-size: 24rpx;
					border-radius: 4rpx;
					margin-left: 20rpx;
					padding: 0 8rpx;
				}
			}
			.alarmLevel1{
				color: $uni-alarm-level-1;
				text{
					border: 2rpx solid  $uni-alarm-level-1;
				}
			}
			.alarmLevel2{
				color: $uni-alarm-level-2;
				text{
					border: 2rpx solid  $uni-alarm-level-2;
				}
			}
			.alarmLevel3{
				color: $uni-alarm-level-3;
				text{
					border: 2rpx solid  $uni-alarm-level-3;
				}
			}
			
			.skeleton{
				display: flex;
				flex-direction: row-reverse;
				--bg-color: #f3f3f3;
				padding-top: 80rpx;
			}
		}
		.info_box{
			display: flex;
			align-items: center;
			min-height: 50rpx;
			margin-bottom: 0rpx;
			.label{
				// width: 200rpx;
				color: #666;
			}
			.value{
				color: #666;
				flex: 1;
				flex-shrink: 0;
	
				align-items: center;
			}
		}
		scroll-view{
			overflow-y: auto;
			height: calc(100vh - 20rpx);
			.comm_box{
				padding: 0 $uni-spacing-col-36;
				background: #fff;
				margin-bottom: 28rpx;
				box-shadow: 0 10px 15rpx 8rpx #ebf4f7;
				.tit_box{
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					
					font-weight: 600;
					image{
						height: 28rpx;
						width: 28rpx;
						position: relative;
						margin-left: 8rpx;
						top: 4rpx;
					}
					.indicators{
						text-align: center;
						font-size: 28rpx;
						color: $uni-text-color-disable;
					}
					.cur{
						border: none;
						color: #333;
						
					}
					view,
					text{
						font-size: 30rpx;
					}
				}
				.con_box{
					padding: 20rpx 0;
					width: 100%;
					.chart_info{
						padding: 0 32rpx;
						background: #f5f7f9;
						color: $uni-color-primary;
						height: 88rpx;
						line-height: 88rpx;
						border-radius: 10rpx;
						text{
							
							&:first-child{
								height: 40rpx;
								line-height: 40rpx;
								color: #333;
								font-size: 30rpx;
								font-weight: bold;
							}
							&:last-child{
								height: 30rpx;
								line-height: 30rpx;
								color: #666;
								font-size: 22rpx;
							}
						}
						view:last-child{
							align-items: flex-end;
						}
					}
					.chartBox{
						// height: 600rpx;
						height: 340px;
					}
				}
			}
			
		}
	}
	
	.removeAlarm_btn_box{
		position: absolute;
		top: 340rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 $uni-spacing-col-36;
		.btn_removeAlarm{
			color: #fff;
			background: $uni-color-primary;
			border-radius: 10rpx;
			width: 330rpx;
			border-radius: 80rpx;
			text-align: center;
		}
		.alarm_removed{
			color: $uni-text-color-black;
			border: 2rpx solid $uni-text-color-disable;
			background: #fff;
		}
	}
	
	.halfOpacity{
		opacity: .7;
	}
	.clicked{
		    transform: translate3d(0, 0, 10rpx);
			box-shadow: 0 0 30rpx 30rpx #DCEBF9;
	}
	// 地图模块下的详情
	.mapDetail{
		.item_box{
			padding-top: 40rpx;
			box-shadow: none;
			padding-bottom: 0;
			margin-bottom: 0;
			.value{
				white-space: inherit;
			}
			.tit{
				flex-direction: row-reverse;
				justify-content: space-between;
				.alarm_type{
					font-size: 34rpx;
				}
				.alarm_level{
					width: 88rpx;
					height: 88rpx;
					margin-right: 0;
				}
				.tagBox{
					height: 42rpx;
					border-radius: 42rpx;
					margin-top: 0rpx;
					color: #55bf87 ;
					font-size: 24rpx;
				}
				text,text:first-child{
					height: 42rpx;
					line-height: 42rpx;
					margin-left: 20rpx;
				}
			}
		}
		.not_readed::before{
			display: none;
		}
		
	}
</style>